<template>
	<view class="page-index">




		<view class="p15 pl12 pr12">

			<view class="u-flex u-f-jsb ">
				<view style="border-radius: 50rpx;" class="u-flex u-f1 u-f-justify bg-white mr10 pt10 pb10"
					@click="areaClick">
					<span class="u-line-1" style="max-width: 240rpx;">{{search.area|| '请选择'}}</span>
					<u-icon class="fz12 ml5" name="arrow-down" color="#666"></u-icon>
				</view>
				<!-- <view class="u-flex">
			请选择
			<u-icon class="fz12 ml5" name="arrow-down" color="#666"></u-icon>
		</view> -->
				<view style="border-radius: 50rpx;" class="u-flex u-f1 u-f-justify bg-white ml10 pt10 pb10"
					@click="popupList=sortList,pupopShow=true">
					{{search.type_name}}
					<u-icon class="fz12 ml5" name="arrow-down" color="#666"></u-icon>
				</view>
			</view>

			<view class="bg-white mt10 module-search">
				<input type="text" v-model="search.name" class="search-input" placeholder="请输入诊所名称搜索" />
				<view class="search-btn" @click="initData()">搜索</view>
				<!-- <u-search :show-action="false" v-model="search.name" placeholder="请输入诊所名称搜索" :input-style="{'width':'50px',padding:0}"
					@search="initData()" @custom="initData()"></u-search> -->
			</view>
		</view>
		<view class="p15 bg-white ">
			<view class="module-activity">
				<view class="">
					<view class=" brs10 mb12 u-flex p12 bm" v-for="(item,index) in flowList" :key="index"
						@click="toInfo(item)" style="align-items: flex-start;">
						<image :src="$wanlshop.oss(item.avatar)" class="w80 h80 brs5" mode="aspectFill"
							style="min-width: 160rpx;">
						</image>
						<view class="pl12" style="width: 100%;">
							<view class="u-flex u-f-jsb">
								<view class="u-line-2 c3 fz15 u-font-bold">{{item.shopname}}</view>
								<view class="fz12" v-if="item.distance">{{item.distance}}km</view>
							</view>
							<view class="fz12 c9 u-flex mt12">
								<u-icon name="clock" class="mr5" size="30"></u-icon>
								{{item.time}}
							</view>
							<view class="fz12 c9 u-flex mt10">
								<u-icon name="map" class="mr5" size="30"></u-icon>
								{{item.address}}
							</view>

							<view class="u-flex mt10" style="justify-content: flex-end;">
								<view class="btn" @click.stop="toAdd(item)">立即预约</view>
							</view>
						</view>
					</view>
				</view>

				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
		</view>

		<u-picker mode="selector" range-key="name" @confirm="popupConfirm" v-model="pupopShow"
			:range="popupList"></u-picker>
		<wanl-address ref='wanlAddress' @resetAddress="resetAddress"
			@selectAddress="successSelectAddress"></wanl-address>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupFiled: 'type',
				popupList: [],
				pupopShow: false,
				sortList: [{
					name: '默认排序',
					id: 1
				}, {
					name: '距离排序',
					id: 2
				}, ],
				keyword: '',
				isLogin: false,
				search: {
					area: '',
					name: '',
					type: 2,
					type_name: '距离排序',
				},
				curArticle: 1,
				noticeList: [],
				serviceImg: '',
				showVideo: false,
				showService: false,
				showTips: false,
				// 选择
				statusBarHeight: 20,
				curBanner: {},
				bannerHeight: 200,
				background: {
					background: '#1a2a7e'
				},
				userInfo: {},
				otherList: [],
				flowList: [],
				loadStatus: 'loadmore',
				page: 1,
				lng: '',
				lat: '',
				noticeListAll: [],
				actionList: [],
				bannerList: [],
			}
		},
		onShareAppMessage(e) {},
		onShareTimeline() {

		},
		// 监听上拉
		onPullDownRefresh() {
			this.search= {
					area: '',
					name: '',
					type: 2,
					type_name: '距离排序',
				}
			this.initData()
			this.init()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onShow() {},
		onLoad(e) {
			this.$nextTick(() => {

				let that = this
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res, 1212)
						that.lat = res.latitude
						that.lng = res.longitude
						that.initData()
						that.init()
					},
					fail(error) {
						console.log(error, 1212)
						that.initData()
						that.init()
					}
				});
			})
		},

		// 页面下拉到底部触发
		onReachBottom() {
			console.log(this.loadStatus, 11111)
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		methods: {
			popupConfirm(e) {
				let idx = e[0]
				this.search[this.popupFiled] = this.popupList[idx].id
				this.search[this.popupFiled + '_name'] = this.popupList[idx].name
				this.initData()
				console.log(e, 122)
			},
			toAdd(item) {
				uni.setStorageSync('storeInfo', JSON.stringify(item))
				uni.switchTab({
					url: '/pages/store/add'
				})
			},
			toInfo(item) {
				uni.navigateTo({
					url: '/pages/store-detail?id=' + item.id
				})
			},
			resetAddress() {
				this.search.area = ``
				this.search.province_id = '';
				this.search.city_id = '';
				this.search.area_id = '';
				this.initData()
			},
			areaClick() {
				this.$refs.wanlAddress.show()
			},
			successSelectAddress(address) {
				console.log(address)
				// ${address.province}-${address.city}-
				this.search.area = `${address.province}-${address.city}-${address.district}`
				this.search.province_id = address.ids[0];
				this.search.city_id = address.ids[1];
				this.search.area_id = address.ids[2];
				this.initData()

			},
			init() {


				uni.request({
					url: '/wanlshop/index/area',
					data: {
						type: 'hospital'
					},
					complete: res => {
						console.log(res, 1212)
						if (res.res.code === 1) {
							let _list = res.res.data.data
							this.flowList = [...this.flowList, ..._list]
							// 判断所有数据是否请求完毕
							if (res.res.data.total > this.flowList.length) {
								this.page++
								this.loadStatus = 'more'
							} else {
								this.loadStatus = 'noMore'
							}

						}
					}
				});

			},
			initData() {
				this.page = 1
				this.flowList = []
				this.getData()

			},
			getData() {
				let post = {
					page: this.page,
					lat: this.lat,
					lng: this.lng,
					...this.search
				}
				uni.request({
					url: '/wanlshop/index/shop',
					data: post,
					method: 'POST',
					complete: res => {
						console.log(res, 1212)
						if (res.res.code === 1) {
							let _list = res.res.data.data
							this.flowList = [...this.flowList, ..._list]
							// 判断所有数据是否请求完毕
							if (res.res.data.total > this.flowList.length) {
								this.page++
								this.loadStatus = 'more'
							} else {
								this.loadStatus = 'noMore'
							}

						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.act-img {
		width: 382rpx;
		height: 188rpx;
		display: block;
	}

	.search-select {
		background: #fff;
		border-radius: 50rpx;
		padding: 12rpx 18rpx;
		width: 150rpx;
	}

	page {}

	.page-content {
		background: #fff;
		border-radius: 30rpx;
		position: relative;
		top: -30rpx;
	}

	.ic-play {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 20rpx;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

	}

	.module-banner {
		height: 280rpx;


	}

	.btn {

		height: 68rpx;
		background: #1a2a7e;
		color: #fff;
		display: flex;
		font-size: 24rpx;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		text-align: center;
		padding: 0 40rpx;
	}

	.module-activity {}

	// .index-act{
	// 	.act1{
	// 		height: 188rpx;
	// 		background:url('https://dl.nhbdic.com/admin-api/infra/file/18/get/image/bg-act1.png');
	// 		background-size: cover;
	// 	}
	// 	.act2{
	// 		height: 188rpx;
	// 		background:url('https://dl.nhbdic.com/admin-api/infra/file/18/get/image/bg-act.png');
	// 		background-size: cover;
	// 	}
	// }
	.bg-img-block {
		background: #1a2a7e;
		height: 500rpx;
	}

	.module-user {
		padding-bottom: 50rpx;
		background: #1a2a7e;
	}

	.btn-view {
		background: #1a2a7e;
		color: #fff;
		border-radius: 50rpx;
		padding: 10rpx 20rpx;

	}

	.module-search {
		border-radius: 50rpx;
		overflow: hidden;
		display: flex;
		align-items: center;

		.search-input {
			flex: 1;
			padding-left: 40rpx;
		}

		.search-btn {
			border-radius: 0 50rpx 50rpx 0;
			background: #1a2a7e;
			color: #fff;
			font-size: 26rpx;
			padding: 20rpx 40rpx;
		}
	}
</style>